import { Injectable } from '@angular/core';
import { filter } from 'rxjs/operators';
import { NavigationEnd, Router } from '@angular/router';
import { Platform } from '@ionic/angular';
import { EventService } from '../service/event.service';

@Injectable({
  providedIn: 'root'
})
export class TabsService {
  //隐藏的路由的名称
  hideTabBarPages = [
    'tab2',
  ];
  routeParamPages: string[] = [
    
  ];
  //导入router和platform
  constructor(private router: Router, private platform: Platform,private eventS:EventService) {
    this.platform.ready().then(() => {
      console.log('Core service init');
      this.navEvents();
    });
  }
  /**
   * 是否动画隐藏tabs
   * @param isAnim 
   */
  public hideTabs(isAnim?:boolean) {
    const tabBar = document.getElementById('myTabBar');
    if(!tabBar){
      return;
    }
    if(!isAnim){
      if (tabBar.style.display !== 'none') tabBar.style.display = 'none';
    }else{
      tabBar.style.transition="visibility 500ms,opacity 500ms,margin-bottom 200ms";
      tabBar.style.visibility="hidden";
      tabBar.style.opacity='0';
      setTimeout(()=>{
        tabBar.style['margin-bottom']='-60px'
      });
    }
    
  }
  /**
   * 是否动画去显示tabs
   * @param isAnim 
   */
  public showTabs(isAnim?:boolean) {
    const tabBar = document.getElementById('myTabBar');
    if(!tabBar){
        return;
    }
    if(!isAnim){
      if (tabBar.style.display !== 'flex') tabBar.style.display = 'flex';
    }else{
      tabBar.style.transition="visibility 500ms,opacity 500ms,margin-bottom 0ms";
      tabBar.style.visibility="visible";
      tabBar.style.opacity='1';
      setTimeout(()=>{
        tabBar.style['margin-bottom']='0'
      });
    }
  }
  //router.events订阅的内容器，只获取NavigationEnd事件
  private navEvents() {
    let that=this;
    this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe((e: any) => {
      console.log(e);
      if(e.urlAfterRedirects=='/tabs/home' || e.urlAfterRedirects=='/tabs/index3rd'){
          that.eventS.publish("getClockNum");
      }
      this.showHideTabs(e);
    });
  }
  //根据导航到的页面来处理选项卡是应该显示还是隐藏
  private showHideTabs(e: any) {
    // Result:  e.url: "/tabs/groups/new-group?type=group"
    // Split the URL up into an array. 获取事件url
    const urlArray = e.url.split('/');
    // Result: urlArray: ["", "tabs", "groups", "new-group?type=group"]
    // Grab the parentUrl   
    const pageUrlParent = urlArray[urlArray.length - 2];
    // Grab the last page url.  获取路径最后一项URL
    const pageUrl = urlArray[urlArray.length - 1];
    // Result: new-group?type=group
    //url删除参数 ?type=group
    const page = pageUrl.split('?')[0];
    // Result: new-group
// Check if it's a routeParamPage that we need to hide on
     const hideParamPage = this.routeParamPages.indexOf(pageUrlParent) > -1 && !isNaN(Number(page));
// Check if we should hide or show tabs.
    const shouldHide = this.hideTabBarPages.indexOf(page) > -1 || hideParamPage;
    // Result: true
    // Not ideal to set the timeout, but I haven't figured out a better method to wait until the page is in transition...
    try {
      setTimeout(() => shouldHide ? this.hideTabs(true) : this.showTabs(true), 0);
    } catch (err) {
    }
  }

}
